import { Input, Button, Carousel } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
// import { useIntl } from 'umi';
import styles from './index.less';
import IconsMenuSplit from '../../../../public/icons/menu_split.png';
// import IconsMenuSplit2 from '../../../../public/icons/menu_splite2.png';
import IconsMenuWarn from '../../../../public/icons/menu_warn.png';
import menu_baozhangjuece from '../../../../public/icons/menu_baozhangjuece.png';
import menu_canshushezhi from '../../../../public/icons/menu_canshushezhi.png';
import menu_chengguo from '../../../../public/icons/menu_chengguo.png';
import menu_dianzidangan from '../../../../public/icons/menu_dianzidangan.png';
import menu_guanlishujv from '../../../../public/icons/menu_guanlishujv.png';
import menu_jingfeishiyong from '../../../../public/icons/menu_jingfeishiyong.png';
import menu_kejijiangli from '../../../../public/icons/menu_kejijiangli.png';
import menu_kejizhuanghua from '../../../../public/icons/menu_kejizhuanghua.png';
import menu_keyanfuwu from '../../../../public/icons/menu_keyanfuwu.png';
import menu_keyanjidi from '../../../../public/icons/menu_keyanjidi.png';
import menu_keyanjixiao from '../../../../public/icons/menu_keyanjixiao.png';
import menu_keyanketi from '../../../../public/icons/menu_keyanketi.png';
import menu_linchuangyanjiu from '../../../../public/icons/menu_linchuangyanjiu.png';
import menu_lunlishencha from '../../../../public/icons/menu_lunlishencha.png';
import menu_neibushenji from '../../../../public/icons/menu_neibushenji.png';
import menu_notice from '../../../../public/icons/menu_notice.png';
import menu_rencaituandui from '../../../../public/icons/menu_rencaituandui.png';
import menu_shengwuyangben from '../../../../public/icons/menu_shengwuyangben.png';
import menu_shixiangshenqing from '../../../../public/icons/menu_shixiangshenqing.png';
import menu_shiyongshouce from '../../../../public/icons/menu_shiyongshouce.png';
import menu_shujvcaiji from '../../../../public/icons/menu_shujvcaiji.png';
import menu_xiangmuzhixing from '../../../../public/icons/menu_xiangmuzhixing.png';
import menu_xitongyonghu from '../../../../public/icons/menu_xitongyonghu.png';
import menu_more from '../../../../public/icons/more.png';
import menu_zhengcefagui from '../../../../public/icons/menu_zhengcefagui.png';
import menu_zhuanjiapingshen from '../../../../public/icons/menu_zhuanjiapingshen.png';
import { Link } from 'umi';
// import classNames from 'classnames'

export default (): React.ReactNode => {
  // const intl = useIntl();
  const [manHorizontalStyle, setMainHorizontalStyle] = useState<number>(2);

  const menus = [
    {
      name: '用户中心',
      name_en: 'User center',
      list: [
        {
          logo: menu_xitongyonghu,
          name: '系统用户',
          link: '/',
          count: 2,
        },
        {
          logo: menu_notice,
          name: '通知公告',
          link: '/',
          count: 1,
        },
        {
          logo: menu_zhengcefagui,
          name: '政策法规',
          link: '/',
          count: 1,
        },
        {
          logo: menu_keyanfuwu,
          name: '科研服务',
          link: '/',
          count: 1,
        },
        {
          logo: menu_shiyongshouce,
          name: '使用助手',
          link: '/',
          count: 1,
        },
      ],
    },
    {
      name: '申报评审',
      name_en: 'Declaration review',
      list: [
        {
          logo: menu_keyanketi,
          name: '科研课题',
          link: '/',
          count: 1,
        },
        {
          logo: menu_linchuangyanjiu,
          name: '临床研究',
          link: '/',
          count: 1,
        },
        {
          logo: menu_keyanjidi,
          name: '学科基地',
          link: '/',
          count: 1,
        },
        {
          logo: menu_rencaituandui,
          name: '人才团队',
          link: '/',
          count: 1,
        },
        {
          logo: menu_kejijiangli,
          name: '科技奖励',
          link: '/',
          count: 1,
        },
      ],
    },
    {
      name: '过程管理',
      name_en: 'Process management',
      list: [
        {
          logo: menu_xiangmuzhixing,
          name: '项目执行',
          link: '/',
          count: 1,
        },
        {
          logo: menu_shujvcaiji,
          name: '数据采集',
          link: '/',
          count: 1,
        },
        {
          logo: menu_shixiangshenqing,
          name: '事项申请',
          link: '/',
          count: 1,
        },
        {
          logo: menu_jingfeishiyong,
          name: '经费使用',
          link: '/',
          count: 1,
        },
        {
          logo: menu_chengguo,
          name: '成果登记',
          link: '/',
          count: 1,
        },
      ],
    },
    {
      name: '数据应用',
      name_en: 'Data application',
      list: [
        {
          logo: menu_guanlishujv,
          name: '管理数据',
          link: '/',
          count: 1,
        },
        {
          logo: menu_keyanjixiao,
          name: '科研绩效',
          link: '/',
          count: 1,
        },
        {
          logo: menu_baozhangjuece,
          name: '保障决策',
          link: '/',
          count: 1,
        },
        {
          logo: menu_kejizhuanghua,
          name: '技术转化',
          link: '/',
          count: 1,
        },
        {
          logo: menu_dianzidangan,
          name: '电子档案',
          link: '/',
          count: 1,
        },
      ],
    },
    {
      name: '管理工具',
      name_en: 'Management tool',
      list: [
        {
          logo: menu_lunlishencha,
          name: '伦理审查',
          link: '/',
          count: 1,
        },
        {
          logo: menu_zhuanjiapingshen,
          name: '专家评审',
          link: '/',
          count: 1,
        },
        {
          logo: menu_shengwuyangben,
          name: '生物样本',
          link: '/',
          count: 1,
        },
        {
          logo: menu_neibushenji,
          name: '内部审计',
          link: '/',
          count: 1,
        },
        {
          logo: menu_canshushezhi,
          name: '参数设置',
          link: '/',
          count: 1,
        },
      ],
    },
  ];

  const MenuView = function (props: any) {
    const { Menus } = props;

    return Menus.map((m: any) => {
      const CodeView = function (propsList: any) {
        const { ChildList } = propsList;
        return ChildList.map((n: any) => {
          return (
            <div className={styles.menuBox}>
              <div className={styles.menuChildBottom}>
                <img className={styles.menu_icon} alt="logo" src={n.logo} />
              </div>
              <div className={styles.menuChildTop}>
                <div className={styles.menuTopWarn}>
                  <img alt="logo" src={IconsMenuWarn} />
                  <span>{n.count}</span>
                  {/* <div className={styles.menu_name}>{n.name}</div> */}
                </div>
                <div className={styles.menu_name}>{n.name}</div>
              </div>
            </div>
          );
        });
      };

      return (
        <>
          <div className={styles.main_menu}>
            <div className={styles.menuItemName}>
              <div className={styles.menuItemTop}>
                <div className={styles.menuFirstLeftLine}></div>
                <span className={styles.menu_item_name}>{m.name}</span>
                <div className={styles.menuFirstRightPic}>
                  <img alt="logo" src={IconsMenuSplit} />
                </div>
              </div>
              <div className={styles.menuItemBottom}>{m.name_en}</div>
            </div>
            <CodeView ChildList={m.list}></CodeView>
          </div>
        </>
      );
    });
  };

  return (
    <>
      <div
        className={styles.main}
        style={{ flexDirection: manHorizontalStyle === 1 ? 'row' : 'row-reverse' }}
      >
        <div
          className={styles.entry_1}
          style={{ float: manHorizontalStyle === 1 ? 'left' : 'right' }}
          onClick={() => {
            setMainHorizontalStyle(1);
          }}
        >
          <div className={styles.entryBox}>
            {/* 综合搜索 */}
            <div className={styles.searchDiv}>
              <span className={styles.search_tip}>综合搜索</span>
              <Input
                className={styles.search_input}
                placeholder="请输入关键字"
                prefix={<SearchOutlined />}
              />
              <Button className={styles.search_button}>搜索</Button>
              <Button className={styles.search_button}>高级搜索</Button>
            </div>

            <MenuView Menus={menus}></MenuView>
          </div>
        </div>

        <div
          className={styles.notice_1}
          style={{ float: manHorizontalStyle === 1 ? 'right' : 'left' }}
        >
          {/* 通知公告：标题 */}
          <div className={styles.notice_top_title}>
            <div className={styles.noticeLine}></div>
            <span>公告通知</span>
            <Link to="/" className={styles.notice_more}>
              更多
              <img alt="logo" src={menu_more} />
            </Link>
          </div>

          {/* 自动播放图片 */}
          <div className={styles.notice_banners}>
            <Carousel autoplay>
              <div>
                <h3 className={styles.notice_banners_carousel}>1</h3>
              </div>
              <div>
                <h3 className={styles.notice_banners_carousel}>2</h3>
              </div>
              <div>
                <h3 className={styles.notice_banners_carousel}>3</h3>
              </div>
              <div>
                <h3 className={styles.notice_banners_carousel}>4</h3>
              </div>
            </Carousel>
          </div>
          {/* 列表 */}
          <div className={styles.msg_top}>
            <div className={styles.msg_top_date}>
              <div className={styles.msg_date}>03-10</div>
              <div className={styles.msg_year}>2020</div>
            </div>
            <div className={styles.msg_title}>赵玉沛院长发表总结</div>
            <div className={styles.msg_content}>赵玉沛院长发表总结讲话，这次会…</div>
          </div>
          <div className={styles.msg_one}>
            <div className={styles.msg_one_left}>
              <div className={styles.msg_one_day}>01</div>
              <div className={styles.msg_one_month}>2020.03</div>
            </div>
            <div className={styles.msg_one_right}>
              <div className={styles.msg_one_title}>我院6名医生东单体育馆</div>
              <div className={styles.msg_one_content}>
                赵玉沛院长发表总结讲话，这次会议是一个“高质量会议”…
              </div>
            </div>
          </div>
          <div className={styles.msg_one}>
            <div className={styles.msg_one_left}>
              <div className={styles.msg_one_day}>01</div>
              <div className={styles.msg_one_month}>2020.02</div>
            </div>
            <div className={styles.msg_one_right}>
              <div className={styles.msg_one_title}>我院6名医生东单体育馆</div>
              <div className={styles.msg_one_content}>
                赵玉沛院长发表总结讲话，这次会议是一个“高质量会议”…
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
